<template>
<div>
    <div class="top_bar" >
        <div class="float_left">
            <img class="top_logo" src="../assets/images/logo.png" alt="">
            <img class="top_title" src="../assets/images/home_title_small.png" alt="">
        </div>
        <ul class="top_bar_right">
            <li>
                <el-dropdown trigger="click">
                    <span class="el-dropdown-link top_user">

                        <div style="line-height: 24px;margin-top:10px;text-align: right">
                            <div class="small_avatar">
                                <!--<img src="../assets/images/avatar.jpg">-->
                                <!-- <img v-if="showAvatar" :src="avatar" class="avatar"> -->
                                <!-- <img v-else src="../assets/images/avatar.jpg"> -->
                                <img src="../assets/images/avarar.png">
                            </div>
                            <span class="font_blue">{{userName}}</span>
                            <i class="el-icon-arrow-down" style="font-size: 10px;"></i>
                        </div>
                         <div style="line-height: 24px;text-align: right"><small>{{companyName}}</small></div>


                    </span>
                    
                    <el-dropdown-menu slot="dropdown" class="font_gray">
                        <el-dropdown-item class="font_gray"><Small @click="showUserInfo"><i class="iconfont icon-gerenxinxi"></i>个人信息</Small></el-dropdown-item>
                        <el-dropdown-item class="font_gray"><Small @click="toEditUser"><img src="../assets/images/password.png" style="width:14px; vertical-align:sub; margin-right:2px; margin-left:-2px;"/>修改密码</Small></el-dropdown-item>
                        <!-- <el-dropdown-item class="font_gray"><Small><i class="iconfont icon-shezhi"></i>设置</Small></el-dropdown-item> -->
                        <el-dropdown-item class="font_gray"><Small @click="logOut"><i class="iconfont icon-tuichu"></i>退出</Small></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </li>
            <!--<li>-->
                <!--<Small>-->
                    <!--<i class="iconfont icon-xiaoxi"></i>-->
                    <!--消息-->
                    <!--<el-badge class="mark" :value="3" />-->
                <!--</Small>-->
            <!--</li>-->
            <!--<li>-->
                <!--<Small>-->
                    <!--<i class="el-icon-setting"></i>-->
                    <!--设置-->
                <!--</Small>-->
            <!--</li>-->
            <!--<li>-->
                <!--<Small>-->
                    <!--<i class="iconfont icon-tixing"></i>-->
                    <!--提醒-->
                <!--</Small>-->
            <!--</li>-->
            
        </ul>      
        </div> 
        <!-- 添加修改表单 -->
        <el-dialog title="修改密码" :visible.sync="dialogEditVisible" :show-close="false">
            <el-form :model="editData"  ref="addForm">
                <el-form-item label="帐号" :label-width="formLabelWidth" prop="accountName"
                              :rules="[{ required: true, message: '产品名不能为空'}]">
                    <el-input disabled="true" v-model="editData.accountName" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="原密码" :label-width="formLabelWidth" prop="password"
                              :rules="[{ required: true, message: '产品名不能为空'}]">
                    <el-input type="password" v-model="editData.password" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码" :label-width="formLabelWidth" prop="newPasswd"
                              :rules="[{ required: true, message: '产品名不能为空'}]">
                    <el-input type="password" v-model="editData.newPasswd" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="reset('addForm')">取 消</el-button>
                <el-button type="primary" @click="updatePasswd()">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="用户详情" v-model="dialogViewVisible" :show-close="false">
            <table border="1" bordercolor="#dfe6ec" class="dialog_table" style="height: 100px;">
                <tr>
                    <td width="100">帐号：</td>
                    <td>{{user.accountName}}</td>
                </tr>
                <tr>
                    <td width="100">用户名：</td>
                    <td>{{user.realName}}</td>
                </tr>
                <tr>
                    <td width="100">所属部门：</td>
                    <td>{{user.deptName}}</td>
                </tr>
                <tr>
                    <td width="100">注册时间：</td>
                    <td>{{user.createTime}}</td>
                </tr>
            </table>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            userName: '',
            avatar: '',
            companyName: '',
            showAvatar: false,
            user:{

            },
            editData: {
                accountName: '',
                userId: '',
                password: '',
                newPasswd: ''
            },
            formLabelWidth: 100,
            dialogEditVisible: false,
            dialogViewVisible:  false,
        }
    },
    methods:{
        logOut() {
            console.log("logOut");
            localStorage.userId = '';
            localStorage.deptId = '';
            localStorage.Authorization = '';
            localStorage.avatar = '';
            localStorage.companyId = '';
            localStorage.companyName = '';
            eventBus.$emit('destroyLeftMenu');
            
            this.$router.push("/login");
        },
        toEditUser() {
            this.editData.accountName = localStorage.accountName;
            this.editData.userId = localStorage.userId;
            this.editData.password = '';
            this.editData.newPasswd = '';
            this.dialogEditVisible = true;
        },
        updatePasswd() {
            var vm = this;
            //查询出指定id的商品，然后进入查看详情页面
            this.$http.post(API.rootPath + "/users/" + localStorage.userId + "/passwd", 
                {
                    password: vm.editData.password,
                    newPasswd: vm.editData.newPasswd
                }, {emulateJSON: true}).then((response) => {
                //console.log(response.body);

                    if(response.body.status == 0) {
                        this.$message({
                            message: '修改成功，请重新登录！',
                            type: 'success'
                        });

                        vm.dialogEditVisible = false;
                        //退出重新登录
                        vm.logOut();
                    } else {
                        this.$message({
                            message: response.body.msg,
                            type: 'error'
                        });
                    }
            });
        },
        showUserInfo() {
            var vm = this;
            //查询出指定id的商品，然后进入查看详情页面
            this.$http.get(API.rootPath + "/users/" + localStorage.userId).then((response) => {
                //console.log(response.body);

                if(response.body.status == 0) {
                    this.user = response.body.data;
                    vm.dialogViewVisible = true;
                } else {
                    this.$message({
                        message: response.body.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * 重置表单，并关闭
         */
        reset(formName) {
            this.$refs[formName].resetFields();
            this.dialogEditVisible = false;
        },
    },
    created() {
        var vm = this;
        eventBus.$on('initTopBar', function () {
            console.log("初始化头部啦", localStorage.userName);
        });
        vm.userName = localStorage.userName;
        vm.avatar = localStorage.avatar;
        vm.companyName = localStorage.companyName;
        if (vm.avatar != 'undefined') {
            vm.showAvatar = true;
        }
        // console.log("登录人头像： ", vm.avatar);
        // console.log("头像是否存在：", vm.showAvatar);
        // console.log("公司名称：", vm.companyName);
    }
}
</script>
